<template>
  <div ref="main">
    <BasicModal
      @register="registerNewAddModal"
      :title="title"
      @ok="okSubmit"
      v-bind="$attrs"
      :width="560"
      :okText="submitText"
      cancelText=""
      :getContainer="() => $refs.main"
      @visible-change="visibleChange"
    >
      <BasicForm @register="registerFromNewAdd" />
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { message } from 'ant-design-vue';
  import { defineEmits, ref } from 'vue';
  import {
    postStaticsCodeInsert,
    getStaticsCodeDetail,
    postStaticsCodeUpdate,
  } from '/@/api/promotion';

  const { t } = useI18n();

  const emits = defineEmits(['activeSuccess', 'register']);

  const title = ref(t('新增统计'));
  const submitText = ref(t('table.promotion.promotion_confirm_add'));
  const editId = ref('' as any);

  /** 新增:1 编辑:3 */
  const modalType = ref(1);

  const schemas: FormSchema[] = [
    {
      field: 'name',
      component: 'Input',
      label: t('统计名称：'),
      defaultValue: '',
      componentProps: {
        size: 'large',
        placeholder: t('请输入统计名称'),
        allowClear: false,
      },
      rules: [
        {
          required: true,
          validator: async (_, value) => {
            if (!value) {
              return Promise.reject(t('请输入统计名称'));
            }
          },
          trigger: 'blur',
        },
      ],
    },
    {
      field: 'code',
      component: 'InputTextArea',
      label: t('routes.promotion.statics_code'),
      defaultValue: '',
      componentProps: {
        size: 'large',
        allowClear: false,
        placeholder: t('请输入统计代码'),
        autoSize: {
          minRows: 4,
          maxRows: 4,
        },
      },
      rules: [{ required: true, message: '统计代码不能为空', trigger: 'blur' }],
    },
    {
      field: 'domain',
      component: 'InputTextArea',
      label: t('域名列表：'),
      defaultValue: '',
      componentProps: {
        size: 'large',
        allowClear: false,
        placeholder: t('每行一个，最多200行'),
        autoSize: {
          minRows: 4,
          maxRows: 4,
        },
      },
      rules: [{ required: true, message: '域名列表不能为空', trigger: 'blur' }],
    },
  ];
  function visibleChange(visible: boolean) {
    if (!visible) {
      changeOkLoading(false);
      resetFields();
    }
  }
  const [registerNewAddModal, { closeModal, changeOkLoading }] = useModalInner(async (dadas) => {
    if (dadas.type == 1) {
      // 新增
      title.value = t('新增统计');
      submitText.value = t('table.promotion.promotion_confirm_add');
      modalType.value = 1;
      editId.value = '';
    } else {
      // 编辑
      title.value = t('修改统计');
      submitText.value = t('business.banner_confrim');
      modalType.value = 3;
      editId.value = dadas.id;
      const { data } = await getStaticsCodeDetail({ id: dadas.id });
      const names = data.map((item: { name: any }) => item.name).join('\n');
      dadas.domain = names;
      setFieldsValue(dadas);
    }
  });

  const [registerFromNewAdd, { validate, setFieldsValue, resetFields }] = useForm({
    schemas,
    showActionButtonGroup: false,
    labelWidth: 100,
    baseColProps: { span: 24 },
  });
  /** 提交操作 */
  async function okSubmit() {
    changeOkLoading(true);
    try {
      const values = await validate();
      const trimmedStr = values.code.trim();
      const isWrappedByScriptTag =
        trimmedStr.startsWith('<script') && trimmedStr.endsWith('script>');
      if (!isWrappedByScriptTag) {
        message.error('统计代码没有被<script>标签包裹，请重新输入');
        changeOkLoading(false);
        return;
      }
      const _domain = values.domain.replace(/\n/g, ',');
      const real_domain = _domain
        .split(',')
        .filter((item) => item.trim() !== '')
        .join(',');
      /**
      使用 split 方法按 ',' 分隔
      */
      const domainArray = real_domain.split(',');
      // 判断里面是否含有30个以上的域名
      const isInvalid = domainArray.every((str: string | any[]) => str.length <= 30);
      if (!isInvalid) {
        message.error('域名长度不能超过30个字符，请重新输入');
        changeOkLoading(false);
        return;
      }
      // 统计每个元素的出现次数
      const countMap = {};
      domainArray.forEach((item: string | number) => {
        countMap[item] = (countMap[item] || 0) + 1;
      });
      // 筛选出重复的元素
      const duplicates = Object.keys(countMap).filter((item) => countMap[item] > 1);
      if (duplicates.length > 0) {
        message.error('域名列表里不能有重复域名，请重新输入');
        changeOkLoading(false);
        return;
      }
      const total = real_domain.split(',').length;
      if (total > 0) {
        if (total > 200) {
          message.error('域名列表不能超过200行');
          changeOkLoading(false);
          return;
        } else {
          values.domain = real_domain;
          values.total = total;
        }
      } else {
        values.domain = '';
        values.total = 0;
      }
      if (modalType.value == 3) {
        values['id'] = editId.value;
      }
      const { data, status } =
        modalType.value == 3
          ? await postStaticsCodeUpdate(values)
          : await postStaticsCodeInsert(values);
      if (status) {
        changeOkLoading(false);
        message.success(data);
        emits('activeSuccess');
        resetFields();
        closeModal();
      } else {
        changeOkLoading(false);
        message.error(data);
      }
    } catch (error) {
      changeOkLoading(false);
      console.log(error);
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep(.ant-form) {
    border-bottom: 1px solid #dce3f1;
  }

  .line {
    width: 80%;
    height: 1.5px;
    margin-top: 20px;
    margin-left: 10%;
    background-color: #4444;
    font-size: 14px;
    font-weight: 500;
  }
</style>
